<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	body{
		text-align: center;
	}
	nav{
		display: inline-block;
		margin: 60px auto 45px;
		/* background-color:burlywood; 改变边框颜色*/
		background-color:purple;
	}
	nav a{
		display: inline-block;
		padding: 18px 30px;
		/* color: 改变字体颜色; */
		color:white;
		font-weight: bold;
		font-size: 16px;
		text-decoration:none;
		line-height: 1;
		text-transform: uppercase;
		background-color: transparent;
	}
	.choose{
		/* //改变 点击后的颜色 */
		background-color:blue;
	}
</style>
<title></title>
</head>
<body>
	<div id="main">
		
		<nav>
			<a href="#" class="choose">Home</a>
			<a href="#">Projects</a>
			<a href="#">Services</a>
			<a href="#">Contact</a>
		</nav>
		
		
		<p>您选择了<b id='menuName'> Home </b> 菜单</p>
		
	</div>
	<script>
		var menus=document.getElementsByTagName('a');
		var menuName=document.getElementById('menuName');//选择哪个就是哪个菜单
		var main=document.getElementById('main');
		//对整体赋予的点击事件 判断触发事件的元素
		main.addEventListener('click',change);
		function change(e){
			//console.log(e){
				var el=e.target;
				//console.log(e.tagName);
				if(el.tagName=='A'){ //tagName 返回节点
					initMenu();
					el.classList.add('choose');
					menuName.innerHTML=el.innerHTML+"";
				}
			}
			
			
		function initMenu(){
			for(let menu of menus){
				menu.classList.remove('choose');
				
			}
			
		}
		
		
		
		//获取需要点击的元素赋予点击事件
		/*//console.log(menus);
		for(let menu of menus){
			menu.onclick=function(){
				initMenu();
		
				// this.classList.toggle('choose');
				this.classList.add('choose');
				
				//console.log(this.innerHTML);//我的有错误 啊不 这是 是正确的 
				 //menuName.innerHTML=this.innerHTML+"菜单";//显示下面文字 选择哪个就是哪个菜单
				
				menuName.innerHTML=this.innerHTML+"";//显示下面文字 选择哪个就是哪个菜单
	
			}
		}
*/
	</script>
</body>
</html>
